<script setup>
import {chat, send_btn_disabled} from "../../public/js/home";
import {onMounted} from "vue";
import $ from 'jquery'
import router from "@/router";

onMounted(() => {
    chat()
    const generic_set_btn = $('#generic-set-btn')
    const account_set_btn = $('#account-set-btn')
    generic_set_btn.click(() => {
        account_set_btn.removeClass('bg-gray-800')
        account_set_btn.removeClass('color-white')
        generic_set_btn.removeClass('bg-white')
        generic_set_btn.addClass('bg-gray-800')
        generic_set_btn.addClass('color-white')
        router.push('/chat')
    })
    account_set_btn.click(() => {
        let a = 'g-gray-800 color-white'
        let b = 'bg-white'
        generic_set_btn.removeClass('bg-gray-800')
        generic_set_btn.removeClass('color-white')
        account_set_btn.removeClass('bg-white')
        account_set_btn.addClass('bg-gray-800')
        account_set_btn.addClass('color-white')
        router.push('/chat/account-set')
    })
})

</script>

<template>
    <div class="_content">
        <div class="left">
            <div class="main h-full w-full px-[.5rem] py-[.5rem] flex flex-col">
                <div class="new-chat flex gap-2">
                    <div class="in-new-chat flex gap[.75rem] flex-grow item-center back-color-hover min-w-[10rem] px-[.75rem] py-[.25rem] border-color-var-[--left-border-color]  border-radius-7px border-width-[1px]">
                        <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 shrink-0" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                        </svg>
                        <span class="span">New chat</span>
                    </div>
                    <button class="back-color-hover close-span close-div bg-inherit color-inherit">
                        <a class="px-1 py-1 min-h-[44px] w-[2.75rem] flex justify-center item-center bg-dark">
                            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="close-logo-svg w-1rem h-1rem" xmlns="http://www.w3.org/2000/svg">
                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                <line x1="9" y1="3" x2="9" y2="21"></line>
                            </svg>
                        </a>
                    </button>
                </div>
                <div class="log overflow-y-auto flex-grow mr-[10px]">
                    <div class="yesterday"></div>
                    <div class="previous-7-day"></div>
                    <div class="previous-30-day"></div>
                    <div class="month"></div>
                </div>
                <div class="about flex flex-col border-top-width-[1px] border-color-var-[--left-border-color] pt-[.375rem]">
                    <div class="vip flex-1 relative">
                        <button class="flex item-center gap-2 p-[.75rem] border-0 border-radius-7px back-color-hover-2 w-full h-full bg-inherit color-inherit font-size-inherit">
                            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="shrink-0" height="1.2rem" width="1.2rem" xmlns="http://www.w3.org/2000/svg">
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                <circle cx="12" cy="7" r="4"></circle>
                            </svg>
                            开&nbsp;通&nbsp;会&nbsp;员
                            <span class="flex-grow"></span>
                            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 text-gray-200" height="1.2rem" width="1.2rem">
                                <circle cx="12" cy="12" r="1"></circle>
                                <circle cx="19" cy="12" r="1"></circle>
                                <circle cx="5" cy="12" r="1"></circle>
                            </svg>
                        </button>
                    </div>
                    <div class="set-open-btn flex-1 text-align-center relative">
                        <button class="border-0 border-radius-7px back-color-hover-2 flex item-center gap-2 p-[.75rem] w-full h-full bg-inherit color-inherit font-size-inherit">
                            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1.2rem" width="1.2rem" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="12" cy="12" r="3"></circle>
                                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
                            </svg>
                            设&nbsp;置
                            <span class="flex-grow"></span>
                            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 text-gray-200" height="1.2rem" width="1.2rem" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="12" cy="12" r="1"></circle>
                                <circle cx="19" cy="12" r="1"></circle>
                                <circle cx="5" cy="12" r="1"></circle>
                            </svg>
                        </button>

                    </div>
                </div>
            </div>
        </div>
        <div class="right dark-theme-right">
            <div class="w-full head color-[--phone-head-color] bg-color-[--user-bg-color] flex flex-col text-align-center">
                <div class="m-auto">chatGPT-4</div>
            </div>
            <div class="phone-head px-[.25rem]  w-full flex justify-center item-center phone-gap-1 bg-color-[--phone-head-bg-color] color-[--phone-head-color]">
                <button class="phone-left-open-btn border-radius-7px border-width-[1px] border-style-solid border-color-[--phone-head-button-border-color] phone-open-div bg-color-[--phone-head-button-bg-color] bg-color-hover-[--phone-head-button-bg-hover] color-inherit">
                    <span class="close-span cast-inline">
                            <a class="px-1 py-1 min-h-[44px] w-[2.75rem] flex justify-center item-center">
                                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="close-logo-svg w-1rem h-1rem" xmlns="http://www.w3.org/2000/svg">
                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="9" y1="3" x2="9" y2="21"></line>
                                </svg>
                            </a>
                        </span>
                </button>
                <div class="phone-current-chat text-align-center flex-grow">chatGPT-4</div>
                <button class="bg-color-[--phone-head-button-bg-color] border-radius-7px border-width-[1px] border-style-solid border-color-[--phone-head-button-border-color] phone-new-chat bg-color-hover-[--phone-head-button-bg-hover] color-inherit">
                    <span class="close-span cast-inline">
                            <a class="px-1 py-1 min-h-[44px] w-[2.75rem] flex justify-center item-center">
                                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 shrink-0" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                    <line x1="12" y1="5" x2="12" y2="19"></line>
                                    <line x1="5" y1="12" x2="19" y2="12"></line>
                                </svg>
                            </a>
                        </span>
                </button>
            </div>
            <div class="absolute cursor-pointer bg-color-hover-[--open-div-bg-color-hover] open-div">
                        <span class="close-span cast-inline">
                            <a class="px-1 py-1 min-h-[44px] w-[2.75rem] flex justify-center item-center">
                                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="close-logo-svg w-1rem h-1rem" xmlns="http://www.w3.org/2000/svg">
                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="9" y1="3" x2="9" y2="21"></line>
                                </svg>
                            </a>
                        </span>
            </div>
            <div class="view_answers">
                <div class="scroll-item">
                    <div class="scroll">
                        <div class="answers">

                            <div class="under_space"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="send_problems absolute">
                <div class="send_plans flex flex-col">
                    <form class="form">
                        <div class="regenerate flex flex-col h-full w-full gap-2">
                            <div>
                                <div class=" h-full w-full justify-center flex gap-2">
                                    <div class="flex-grow"></div>
                                    <div class="in-regenerate">
                                        <button class="px-[.8rem] py-[1rem] min-h-[1.5rem] mt-[7%] border-radius-[10px] border-style-solid border-width-[1px] border-color-[--regenerate-border-color] back-color-hover-[--regenerate-bg-color-hover] relative back-dark color-[--regenerate-color]">
                                            <span class="in-btn-div flex item-center w-full gap-2">
                                                <svg stroke="currentColor" fill="none" stroke-width="1.5"
                                                     viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"
                                                     height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                                    <polyline points="1 4 1 10 7 10"></polyline>
                                                    <polyline points="23 20 23 14 17 14"></polyline>
                                                    <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
                                                </svg>
                                                Regenerate
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-div">
                                <div class="form-in-div flex flex-col border-radius-[1rem] bg-color-[--form-textarea-bg-color] .border-color-[--form-textarea-border-color] border-width-[1px] border-style-solid">
                                    <textarea class="input_textarea bg-color-[--form-textarea-bg-color] color-[--form-textarea-color] m-auto padding-right-[2.5rem] font-size-[1rem] line-height-[1.5rem] h-[24px] max-h-[200px] m-0 w-full" placeholder="发送消息" rows="1"></textarea>
                                    <button :disabled="send_btn_disabled" class="absolute send_button border-style-solid border-width-[1px] border-color-[--send-button-border-color] border-radius-7px">
                                        <span>
                                            <svg class="w-1rem h-1rem m-0"
                                                 fill="none" stroke-width="2" viewBox="0 0 16 16">
                                                <path d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z" fill="currentColor"></path>
                                            </svg>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="send_under">
                    <span>
                        如果发生错误，请重试
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="set absolute visibility-hidden inset-0">
        <div class="bg-var-[--set-bg-color] inset-0 fixed">
            <div class="h-full w-full grid grid-columns-[10px-1fr-10px] grid-rows-[minmax(10px,1fr)-auto-minmax(10px,1fr)]">
                <div class="relative translate-x-[-50%] left-50% border-radius-[.5rem] bg-white w-full grid-row-start-2 grid-row-auto grid-column-start-2 grid-column-auto max-w-[680px]">
                    <div class="flex justify-between p-[1.5rem] border-bottom-width-1px border-color-[--set-close-btn-color]">
                        <div>
                            <h2>设置</h2>
                        </div>
                        <button class="set-close-btn bg-white border-color-[--set-close-btn-color]">
                            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                            </svg>
                        </button>
                    </div>
                    <div class="padding-[1rem-1.5rem*3]" style="height: 340px">
                        <div class="flex flex-row gap-[1.5rem]">
                            <div class="flex flex-col min-w-[180px] max-w-[200px] flex-shrink-0  margin-left-[-8px]">
                                <button id="generic-set-btn" class="bg-gray-800 color-white font-size-[.875rem] line-height-[1.25rem] flex justify-flex-start item-center gap-[.5rem] border-radius-[.375rem] px-[.5rem] py-[.375rem]">
                                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" class=" h-[1.25rem] w-[1.25rem] fill-gray-800 group-radix-state-active:fill-white dark:fill-gray-500" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path>
                                    </svg>
                                    <span>通用设置</span>
                                </button>
                                <button id="account-set-btn" class="bg-white font-size-[.875rem] line-height-[1.25rem] flex justify-flex-start item-center gap-[.5rem] border-radius-[.375rem] px-[.5rem] py-[.375rem]">
                                    <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 h-[1.25rem] w-[1.25rem]" height="1.25rem" width="1.25rem" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="12" cy="7" r="4"></circle>
                                    </svg>
                                    <span>账号设置</span>
                                </button>
                            </div>
                            <router-view />
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
@font-face {
    font-family: 'soehne-halbfett';
    src: url("/fonts/soehne-halbfett.woff2");
}
@font-face {
    font-family: 'soehne-mono-buch';
    src: url("/fonts/soehne-mono-buch.woff2");
}
@font-face {
    font-family: 'soehne-buch';
    src: url("/fonts/soehne-buch.woff2");
}
@font-face {
    font-family: 'soehne-mono-halbfett';
    src: url("/fonts/soehne-mono-halbfett.woff2");
}
@font-face {
    font-family: 'soehne-kraftig';
    src: url("/fonts/soehne-kraftig.woff2");
}


:root {
    --right-bg-color: #fff;
    --right-color: #000;
    --user-bg-color: #e5e2e2;
    --user-color: #000;
    --left-border-color: #4e4e50;
    --left-button-bg-color-hover: #2f2f34;
    --set-bg-color: rgba(86,88,105,.7);
    --table-bg-color: #000;
    --set-close-bgn-color: rgba(142,142,160,1);
    --send-problems-bg-color1: #e5e2e2;
    --send-problems-bg-color2: rgba(255,255,255,0);
    --regenerate-color: #000;
    --regenerate-bg-color: #fff;
    --regenerate-bg-color-hover: #d0d0d0;
    --regenerate-border-color: #d0d0d0;
    --form-textarea-bg-color: #fff;
    --form-textarea-border-color: #d0d0d0;
    --form-textarea-color: #000;
    --send-button-bg-color: #fff;
    --send-button-color: #d0d0d0;
    --send-button-border-color: #fff;
    ---phone-head-bg-color: #fff;
    --phone-head-color: #000;
    --phone-head-button-bg-color: #fff;
    --phone-head-button-bg-hover: #d0d0d0;
    --phone-head-button-border-color: #fff;
    --open-div-bg-color-hover: #eeebeb;
}




body {
    position: relative;
    width: 100vw;
    height: 100vh;
}
._content {
    overflow: hidden;
    z-index: 0;
    display: flex;
    width: 100%;
    height: 100%;
}

.bg-color-\[--phone-head-bg-color\] {
    background-color: var(---phone-head-bg-color);
}
.color-\[--phone-head-color\] {
    color: var(--phone-head-color);
}
.phone-head {
    height: 0;
    visibility: hidden;
    box-shadow: 0 -12px 20px 0 #525357;
}

table, td, th, tr {
    text-align: center;
    border: 1px solid var(--table-bg-color);
    border-collapse: collapse;
    padding: 2px 1px;
}

.text-align-center {
    text-align: center;
}
.absolute {
    position: absolute;
}
.m-0 {
    margin: 0;
}
.m-auto {
    margin: auto;
}
.w-full {
    width: 100%;
}
.h-full {
    height: 100%;
}
.border-color-\[--regenerate-border-color\] {
    border-color: var(--regenerate-border-color);
}
.mt-\[7\%\] {
    margin-top: 7%;
}
.border-radius-\[10px\] {
    border-radius: 10px;
}

.min-h-\[1\.5rem\] {
    min-height: 1.5rem;
}
.px-\[\.8rem\] {
    padding-left: .8rem;
    padding-right: .8rem;
}
.py-\[1rem\] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.in-btn-div {
    min-height: 50%;
}
.relative {
    position: relative;
}
.p-1 {
    padding: .25rem;
}
.pt-\[\.375rem\] {
    padding-top: .375rem;
}
.rounded-sm {
    border-radius: .125rem;
}
.rounded-md {
    border-radius: .375rem;
}
.mb-1 {
    margin-bottom: 1rem;
}


.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}

.left {
    flex-shrink: 0;
    box-shadow: 5px -5px 25px -2px #242527 inset;
    width: 0;
    background-color: #222325;
    color: aliceblue;
}

svg {
    display: block;
}

.cast-inline {
    display: inline-block;
}

.main {
    height: 100%;
}

.close-span {
    margin: auto;
}

.border-color-var-\[--left-border-color\] {
    border-color: var(--left-border-color);
}
.border-top-width-\[1px\] {
    border-top-width: 1px;
}
.border-width-\[1px\] {
    border-width: 1px;
}
.border-style-solid {
    border-style: solid;
}
.min-w-\[10rem\] {
    min-width: 10rem;
}

.back-color-hover:hover {
    background-color: var(--left-button-bg-color-hover);
    cursor: pointer;
}

.back-color-hover-\[--regenerate-bg-color-hover\]:hover {
    background-color: var(--regenerate-bg-color-hover);
    cursor: pointer;
}

.back-color-hover-2:hover {
    background-color: #2C313B;
    cursor: pointer;
}
.color-\[--regenerate-color\] {
    color: var(--regenerate-color);
}

.close-div {
    border: 1px solid #4e4e50;
    border-radius: 7px;
}
.open-div {
    background-color: var(--right-bg-color);
    border: 1px solid var(--user-bg-color);
    border-radius: 7px;
    margin-left: 1rem;
    margin-top: 1rem;
    color: var(--form-textarea-color);
    z-index: 1;
    visibility: visible;
}

.bg-color-hover-\[--open-div-bg-color-hover\]:hover {
    background-color: var(--open-div-bg-color-hover);
}

.cursor-pointer {
    cursor: pointer;
}




.p-3 {
    padding: .75rem .82rem;
}
.p-\[\.75rem\] {
    padding: .75rem;
}
.px-1 {
    padding-left: .75rem;
    padding-right: .75rem;
}
.px-\[\.75rem\] {
    padding-left: .75rem;
    padding-right: .75rem;
}
.px-\[\.5rem\] {
    padding-left: .5rem;
    padding-right: .5rem;
}
.px-\[\.25rem\] {
    padding-left: .25rem;
    padding-right: .25rem;
}
.py-\[\.25rem\] {
    padding-top: .25rem;
    padding-bottom: .25rem;
}
.py-\[\.5rem\] {
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.py-\[\.75rem\] {
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem;
}
.w-\[2\.75rem\] {
    width: 2.75rem;
}
.min-h-\[44px\] {
    min-height: 44px;
}
.inline-block {
    display: inline-block;
}
.justify-center {
    justify-content: center;
}



.w-1rem {
    width: 1rem;
}
.h-1rem {
    height: 1rem;
}

.log {
    /*background-color: #222325;*/
}


.about {
    height: 7rem;
}
.mr-\[10px\] {
    margin-right: 10px;
}

.right {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    color: var(--right-color);
    background-color: var(--right-bg-color);
}
.phone-head {
    visibility: hidden;
}
.bg-color-\[--phone-head-button-bg-color\] {
    background-color: var(--phone-head-button-bg-color);
}
.bg-color-hover-\[--phone-head-button-bg-hover\]:hover {
    background-color: var(--phone-head-button-bg-hover);
}
.border-color-\[--phone-head-button-border-color\] {
    border-color: var(--phone-head-button-border-color);
}

.view_answers {
    flex: 1;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.scroll-item {
    flex: 1;
    height: 100%;
}

.scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
}

.answers {
    display: flex;
    flex-direction: column;
    /*row-gap: 5rem;*/
}
.flex-shrink-0 {
    flex-shrink: 0;
}
.item-end {
    align-items: flex-end;
}


.aa {
    max-width: 80%;
    min-width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    /*margin-bottom: 2rem;*/
}
.user {
    background-color: var(--user-bg-color);
    color: var(--user-color);
}

.bg-color-\[--user-bg-color\] {
    background-color: var(--user-bg-color);
}

.w-\[30px\] {
    width: 30px;
}
.h-\[30px\] {
    height: 30px;
}
.item-center {
    align-items: center;
}
.photo {
    max-width: 2rem;
    margin-right: .5rem;
}
.content {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-gray-200 {
    --tw-text-opacity: 1;
    color: rgba(217,217,227,var(--tw-text-opacity));
}
.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgba(52,53,65,var(--tw-bg-opacity));
}
.border-radius-\[\.375rem\] {
    border-radius: .375rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.py-\[\.375rem\] {
    padding-top: .375rem;
    padding-bottom: .375rem;
}
.gap-\[\.5rem\] {
    gap: .5rem;
}
.py-2 {
    padding-bottom: .5rem;
    padding-top: .5rem;
}
.text-xs {
    font-size: .75rem;
    line-height: 1rem;
}
.font-spans {
    font-family: Söhne,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}
.justify-between {
    justify-content: space-between;
}
.rounded-t-md {
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
}
.overflow-y-auto {
    overflow-y: auto;
}
.p-4 {
    padding: 1rem;
}
.ml-auto {
    margin-left: auto;
}
button {
    cursor: pointer;
}

.head {
    height: 70px;
    box-shadow: 0 -12px 20px 0 #525357;
}
.under_space {
    height: 12rem;
}
.flex-grow {
    flex-grow: 1;
}
.flex-1 {
    flex: 1;
}
.gap-2 {
    gap: .5rem;
}
.gap\[\.75rem\] {
    gap: .75rem;
}


.send_problems {
    padding: .3rem 0 0 .3rem;
    width: calc(100% - .5rem);
    background: linear-gradient(to top,var(--send-problems-bg-color1),var(--send-problems-bg-color2) 80.85%);
    bottom: 0;
}

.send_plans {
    width: 100%;
}
.regenerate {
    position: relative;
}
.back-dark {
    background-color: var(--regenerate-bg-color);
}
.color-white {
    color: white;
}
.bg-black {
    background-color: black;
}


.in-regenerate {
    min-height: 3.5rem;
}
.form-div {
    margin: auto;
    width: 100%;
}

.bg-color-\[--form-textarea-bg-color\] {
    background-color: var(--form-textarea-bg-color);
}
.\.border-color-\[--form-textarea-border-color\] {
    border-color: var(--form-textarea-border-color);
}
.color-\[--form-textarea-color\] {
    color: var(--form-textarea-color);
}


.border-radius-\[1rem\] {
    border-radius: 1rem;
}

.send_under {
    padding: .75rem 60px 1.5rem 60px;
    color: inherit;
    text-align: center;
}
.form {
    flex-grow: 1;
    width: 55%;
    /*height: 100%;*/
    margin-left: auto;
    margin-right: auto;
}
.form-in-div {
    position: relative;
    padding: 1rem 0 1rem 1rem;
}


.input_textarea {
    overflow-y: hidden;
    resize: none;
    border-width: 0;
    word-wrap: break-word;
}
.font-size-\[1rem\] {
    font-size: 1rem;
}
.line-height-\[1\.5rem\] {
    line-height: 1.5rem;
}
.max-h-\[200px\] {
    max-height: 200px;
}
.h-\[24px\] {
    height: 24px;
}
.padding-right-\[2\.5rem\] {
    padding-right: 2.5rem;
}


.input_textarea:focus {
    outline: none;
}
.input_textarea::-webkit-scrollbar-track{
    background: #40414f;
}
.send_button {
    padding: .6rem;
    background-color: var(--send-button-bg-color);
    color: var(--send-button-color);
    bottom: .6rem;
    right: .5rem;
}
.border-color-\[--send-button-border-color\] {
    border-color: var(--send-button-border-color);
}

.border-0 {
    border: 0;
}
.bg-inherit {
    background-color: inherit;
}
.color-inherit {
    color: inherit;
}
.font-size-inherit {
    font-size: inherit;
}

.border-radius-7px {
    border-radius: 7px;
}

.set-open-btn {
}
.set-close-btn {
}
.set-close-btn:hover {
    color: #131313;
}

.bg-white {
    background-color: white;
}
.color-\[--set-close-btn-color\] {
    color: var(--set-close-bgn-color);
}
.border-radius-\[\.5rem\] {
    border-radius: .5rem;
}
.left-50\% {
    left: 50%;
}
.translate-x-\[-50\%\] {
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
}
.p-\[1\.5rem\] {
    padding: 1.5rem;
}

.visibility-hidden {
    visibility: hidden;
}
.grid {
    display: grid;
}
.grid-columns-\[10px-1fr-10px\] {
    grid-template-columns: 10px 1fr 10px;
}
.grid-rows-\[minmax\(10px\,1fr\)-auto-minmax\(10px\,1fr\)\] {
    grid-template-rows: minmax(10px,1fr) auto minmax(10px,1fr);
}
.grid-row-start-2 {
    grid-row-start: 2;
}

.grid-column-start-2 {
    grid-column-start: 2;
}

.max-w-\[680px\] {
    max-width: 680px;
}

.inset-0 {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.bg-var-\[--set-bg-color\] {
    background-color: var(--set-bg-color);
}
.fixed {
    position: fixed;
}


.visibility-visible {
    visibility: visible;
}

.border-bottom-width-1px {
    border-bottom-width: 1px;
}

.padding-\[1rem-1\.5rem\*3\] {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
}
.gap-\[1\.5rem\] {
    gap: 1.5rem;
}
.flex-row {
    flex-direction: row;
}

.min-w-\[180px\] {
    min-width: 180px;
}
.max-w-\[200px\] {
    max-width: 200px;
}
.margin-left-\[-8px\] {
    margin-left: -8px;
}

.justify-flex-start {
    justify-content: flex-start;
}
.font-size-\[\.875rem\] {
    font-size: .875rem;
}
.line-height-\[1\.25rem\] {
    line-height: 1.25rem;
}
.h-\[1\.25rem\] {
    height: 1.25rem;
}
.w-\[1\.25rem\] {
    width: 1.25rem;
}
.min-h-\[300px\] {
    min-height: 300px;
}
.border-color-\[--set-close-btn-color\] {
    border-color: var(--set-close-bgn-color);
}

.padding-bottom-\[\.75rem\] {
    padding-bottom: .75rem;
}
.gap-\[1rem\] {
    gap: 1rem;
}
.h-\[2\.25rem\] {
    height: 2.25rem;
}

.theme-btn:hover {
    background-color: #c0c1d9;
}

.theme-div {
    visibility: hidden;
}

.left-\[85\%\] {
    left: 85%;
}
.top-\[32\%\] {
    top: 32%;
}

.w-\[200px\] {
    width: 200px;
}
.h-\[160px\] {
    height: 160px;
}
.text-align-left {
    text-align: left;
}

.font-size-\[1\.25rem\] {
    font-size: 1.25rem;
}

.color-black {
    color: black;
}

</style>